<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>道路路面平整度检测记录表</title>
    <link rel="icon" href="../../img/icon.png">
    <link href="../../CSS/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <link href="../../font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="../../CSS/animate.css" rel="stylesheet">
    <link href="../../CSS/style.css" rel="stylesheet">
    <script src="../../JS/jquery-2.1.1.js"></script>
    <script src="../../JS/bootstrap.min.js"></script>
    <script src="../../JS/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="../../JS/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="../../JS/inspinia.js"></script>
    <script src="../../JS/plugins/pace/pace.min.js"></script>
    <script src="../../layui/layui.js"></script>
    <script>
        $(function () {
            var login=sessionStorage.getItem('Islogin');
            if(login!=1){
                if(confirm("未登陆,请先登陆")){
                    window.location.href='../../login.html';
                }
            }else {
                var obj = {
                    url: "http://localhost:8080/employee/findAll",
                    type: "post",
                    dataType: "json",
                    async: true,
                    success: function (result) {
                        // var data=JSON.stringify(result[i]);
                        showData1(result);
                    }
                    // error:function (e) {
                    //     alert("请求失败"+e.toString())
                    // }
                };
                $.ajax(obj);
                var obj1 = {
                    url: "http://localhost:8080/roadBasic/findAll",
                    type: "post",
                    dataType: "json",
                    async: true,
                    success: function (result) {
                        // var data=JSON.stringify(result[i]);
                        showData2(result);
                        showData3(result);
                    }
                    // error:function (e) {
                    //     alert("请求失败"+e.toString())
                    // }
                };
                $.ajax(obj1);
            }
        })
        function showData1(result) {
            for (var i in result) {
                var str = "<option value='" + result[i].employee_name + "'>" + result[i].employee_name + "</option>";
                $("#employee_testing_name").append(str);
            }
        }
        // ---------------------------------------------------------------------------
        function showData2(result) {
            for (var i in result) {
                var str = "<option value='" + result[i].road_basic_id + "'>" + result[i].road_basic_id + "</option>";
                $("#road_basic_id").append(str);
            }
        }
        // -----------------------------------------------------------------------
        function showData3(result) {
            for (var i in result) {
                var str = "<option value='" + result[i].road_basic_name + "'>" + result[i].road_basic_name + "</option>";
                $("#road_basic_name").append(str);
            }
        }
    </script>
</head>

<body>
    <div id="wrapper">
        <!--左边菜单栏-->
        <nav class="navbar-default navbar-static-side" role="navigation">
            <div class="sidebar-collapse">
                <ul class="nav metismenu" id="side-menu">
                    <li class="nav-header">
                        <div class="dropdown profile-element">
                            <span>
                                <img alt="image" width="50px" height="50px" class="img-circle"
                                    src="../../img/head.jpg" />
                            </span>
                            <a data-toggle="dropdown" class="dropdown-toggle">
                                <span class="clear"><span class="block m-t-xs"><strong class="font-bold">组长:张宁</strong>
                                    </span><span class="text-muted text-xs block">组员<b class="caret"></b></span></span>
                            </a>
                            <ul style="text-align: center" class="dropdown-menu animated fadeInRight m-t-xs">
                                <li>王秋红</li>
                                <li>周彦西</li>
                                <li>王嘉伟</li>
                                <!--<li class="divider"></li>-->
                            </ul>
                        </div>
                        <div class="logo-element">
                            IN+
                        </div>
                    </li>
                    <li>
                        <a> <i class="fa fa-th-large"></i> <span class="nav-label">职工信息管理</span> <span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level collapse">
                            <li><a href="../employee/employee.html"> 职工表</a></li>
                            <li><a href="../employeeType/employeeType.html">职工种类</a></li>
                        </ul>
                    </li>
                    <li>
                        <a> <i class="fa fa-th-large"></i> </i> <span class="nav-label">道路信息管理</span><span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level collapse">
                            <li><a href="../roadBasic/roadBasic.html">道路基本信息表</a></li>
                            <li><a href="../roadwayType/roadwayType.html">车行道分类表</a></li>
                            <li><a href="../roadway/roadway.html">车行道信息表</a></li>
                            <li><a href="../roadType/roadType.html">路面类型表</a></li>
                            <li><a href="../ancillaryFacilities/ancillaryFacilities.html">附属设施表</a></li>
                        </ul>
                    </li>
                    <li>
                        <a> <i class="fa fa-th-large"></i><span class="nav-label">损害类型信息管理</span><span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level collapse">
                            <li><a href="../damageTypeS/damageTypeStable.html">损害类型子参照表</a></li>
                            <li><a href="../damageTypeF/damageTypeFtable.html">损害类型父参照表</a></li>
                        </ul>
                    </li>
                    <li>
                        <a> <i class="fa fa-th-large"></i> <span class="nav-label">评定等级信息管理</span><span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level collapse">
                            <li><a href="../evaluateGrade/evaluateGrade.html">评定等级表</a></li>
                            <li><a href="../ratingJudge/ratingJudge.html">评定等级判断表</a></li>
                            <li><a href="../evaluateIndex/evaluateIndex.html">评定指标表</a></li>
                            <li><a href="../damageSingle/damageSingle.html">路面损害单项扣分表</a><li>
                        </ul>
                    </li>
                    <li>
                        <a> <i class="fa fa-th-large"></i> <span class="nav-label">日常巡查信息管理</span><span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level collapse">
                            <li><a href="../roadPatrol/roadPatrol.html">道路日常巡查记录表</a></li>
                            <li><a href="../damageSingle/damageSingle.html">设施损坏通知单</a><li>
                        </ul>
                    </li>
                    <li>
                        <a> <i class="fa fa-th-large"></i> <span class="nav-label">定期检查信息管理</span><span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level collapse">
                            <li><a href="../pavementFlatness/pavementFlatness.html">平整度检测记录表</a></li>
                            <li><a href="../roadDamage/raodDamage.html">路面损害情况记录表</a><li>
                            <li><a href="../pavementDamage/pavementDamage.html">路面损害调查表</a><li></li>
                            <li><a href="../roadTechnicalEvaluate/roadTechnicalEvaluate.html">道路技术状况评估结果表</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>

        <!--右边界面框-->
        <div id="page-wrapper" class="gray-bg">
            <!--head-->
            <div class="row border-bottom">
                <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
                    <div class="navbar-header">
                        <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i
                                class="fa fa-bars"></i></a>
                        <form role="search" class="navbar-form-custom" action="#">
                            <div class="form-group">
                                <input type="text" placeholder="Search for something..." class="form-control"
                                    name="top-search" id="top-search">
                            </div>
                        </form>
                    </div>
                    <ul class="nav navbar-top-links navbar-right">
                        <li>
                            <span class="m-r-sm text-muted welcome-message">欢迎使用道路养护管理系统</span>
                        </li>
                        <li>
                            <a href="../../login.html">
                                <i class="fa fa-sign-out"></i> 退出登录
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>


            <!--主界面-->
            <div style="margin-top: 30px" class="layui-container">

                <h1 style="text-align: center;margin-bottom: 30px">道路路面平整度检测记录表</h1>

                <div style="margin: auto" class="layui-container">
                    <table class="layui-hide" id="test" lay-filter="test"></table>
                </div>

                <div style="margin: 20px 20% ; display: none" id="formDemo">
                    <form id="employeeAdd" class="layui-form">
                        <div class="layui-form-item">
                            <label>职工(检测人员)姓名</label>
                            <select id="employee_testing_name" name="employee_testing_name" lay-verify="required"
                                lay-search="" autocomplete="off">
                            </select>
                        </div>
                        <!--<div class="layui-form-item">-->
                            <!--<label>道路编号</label>-->
                            <!--<select id="road_basic_id" name="road_basic_id" lay-verify="required" lay-search=""-->
                                <!--autocomplete="off">-->
                            <!--</select>-->
                        <!--</div>-->
                        <div class="layui-form-item">
                            <label>道路名称</label>
                            <select id="road_basic_name" name="road_basic_name2" lay-verify="required" lay-search=""
                                autocomplete="off">
                            </select>
                        </div>
                        <div class="layui-form-item">
                            <label>IRI</label>
                            <input style="width: 300px" type="text" name="pavement_flatness_IRI" placeholder="IRI"
                                class="layui-input" autocomplete="off">
                        </div>
                        <div class="layui-form-item">
                            <label>检查日期</label>
                            <input id="bitdate" style="width: 300px" type="text" name="pavement_flatness_date"
                                placeholder="检查日期" autocomplete=“off” class="layui-input">
                        </div>
                        <div class="layui-form-item">
                            <label>备注</label>
                            <textarea style="width: 300px;height: 100px;" name="pavement_flatness_remarks"
                                placeholder="备注" class="layui-input" autocomplete="off"></textarea>
                        </div>

                        <div style="margin-left: 80px" class="layui-form-item">
                            <div>
                                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="Add">添加</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>
                </div>

                <!--序列-->
                <script type="text/html" id="zizeng">
                {{d.LAY_TABLE_INDEX+1}}
            </script>

                <!--头部工具-->
                <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                    <button data-method="offset" data-type="auto"  class="layui-btn layui-btn-sm" lay-event="add">添加数据</button>
                    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
                    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
                </div>
            </script>

                <!--操作框-->
                <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>

                <script>
                    layui.use(['table', 'jquery', 'layer', 'form', 'laydate'], function () {
                        var table = layui.table;
                        var layer = layui.layer;
                        var $ = layui.jquery;
                        var form = layui.form;
                        var laydate = layui.laydate;


                        //执行一个laydate实例
                        laydate.render({
                            elem: '#bitdate' //指定元素
                        });
                        //执行一个laydate实例
                        laydate.render({
                            elem: '#indate' //指定元素
                        });

                        table.render({
                            elem: '#test'
                            , url: 'http://localhost:8080/pavementFaltness/findByPage'
                            , cellMinWidth: 80
                            , page: true
                            , id: 'pavement_flatness_id'
                            , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                                title: '提示'
                                , layEvent: 'LAYTABLE_TIPS'
                                , icon: 'layui-icon-tips'
                            }]
                            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                            , cols: [[
                                { type: 'checkbox', fixed: 'left' }
                                , { field: 'zizeng', title: '序列', fixed: 'left', templet: '#zizeng', align: 'center' }
                                , { field: 'pavement_flatness_id', title: '路面平整度检测记录编号', hide: true, align: 'center' }
                                , { field: 'employee_testing_name', edit: true, title: '检测人员', align: 'center' }
                                , { field: 'road_basic_id', edit: true, title: '道路编号', totalRow: true, align: 'center' }
                                , { field: 'road_basic_name2', edit: true, title: '道路名称', align: 'center' }
                                , { field: 'pavement_flatness_IRI', edit: true, title: 'IRI', align: 'center' }
                                , { field: 'pavement_flatness_date', edit: true, title: '检查日期', align: 'center' }
                                , { field: 'pavement_flatness_remarks', edit: true, title: '备注', align: 'center' }
                                , { fixed: 'right', title: '操作', toolbar: '#barDemo', align: 'center', width: 200 }
                            ]]
                        });

                        //头工具栏事件
                        table.on('toolbar(test)', function (obj) {
                            var checkStatus = table.checkStatus(obj.config.id);
                            switch (obj.event) {
                                case 'add':
                                    add();
                                    break;
                                case 'getCheckLength':
                                    var data = checkStatus.data;
                                    layer.msg('选中了：' + data.length + ' 个');
                                    break;
                                case 'isAll':
                                    layer.msg(checkStatus.isAll ? '全选' : '未全选');
                                    break;

                                //自定义头工具栏右侧图标 - 提示
                                case 'LAYTABLE_TIPS':
                                    layer.alert('待开放功能');
                                    break;
                            };
                        });

                        //监听单元格编辑
                        table.on('edit(test)', function (obj) {
                            var value = obj.value //得到修改后的值
                                , data = obj.data; //得到所在行所有键值
                            $.ajax({
                                type: "POST",
                                url: "http://localhost:8080/pavementFaltness/change",
                                data: data,
                                success: function (success) {
                                    if (success == "成功") {
                                        layer.msg('修改为:' + value);
                                    }
                                }
                                // error:function (e) {
                                //     alert("请求失败"+e.toString())
                                // }
                            });
                        });

                        //监听行工具事件
                        table.on('tool(test)', function (obj) {
                            var data = obj.data;
                            //console.log(obj)
                            if (obj.event === 'del') {
                                layer.confirm('你确定要删除此信息吗？', function (index) {
                                    $.ajax({
                                        type: "POST",
                                        url: "http://localhost:8080/pavementFaltness/delete?id=" + data.pavement_flatness_id,
                                        success: function (data) {
                                            location.reload();
                                        }
                                        // error:function (e) {
                                        //     alert("请求失败"+e.toString())
                                        // }
                                    })
                                });
                            } else if (obj.event === "detail") {
                                layer.alert(JSON.stringify(data));
                            } else if (obj.event === "edit") {

                            }
                        });
                        function add() {
                            layer.open({
                                type: 1
                                , area: ['500px', '600px']
                                , title: '职工信息添加'
                                , offset: 'auto'//具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                                , id: 'layerDemo' //防止重复弹出
                                , scrollbar: false // 父页面 滚动条 禁止
                                , content: $("#formDemo")
                                , resize: false
                            });
                            //监听提交
                            form.on('submit(Add)', function (data) {
                                $.ajax({
                                    type: "POST",
                                    url: "http://localhost:8080/pavementFaltness/add",
                                    data: $('#employeeAdd').serialize(),
                                    success: function (result) {
                                        location.reload();
                                    }
                                });
                            });
                        };
                    })
                </script>

            </div>

        </div>

    </div>
</body>

</html>